.card {
  overflow: hidden;
  position: relative;
  display: inline-block;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}

.card img {
  width: 140px;
  height: 200px;
  /* position: absolute; */
}

.card:hover .data {
  transform: translateY(0px);
}

.card .data {
  position: absolute;
  width: 100%;
  height: 80%;
  bottom: 0;
  transform: translateY(60%);
  backdrop-filter: saturate(180%) blur(5px);
  background-color: rgba(90, 90, 90, 0.3);
  transition: transform 300ms ease;
  will-change: transform;
}

.card .data * {
  color: #fff;
}

.card .data .content {
  height: 40%;
  padding: 0 10px;
}

.card .data .content .title {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media only screen and (min-width: 1000px) {
  .card,
  .card img {
    width: 152px;
    height: 217px;
  }
}

@media only screen and (min-width: 1200px) {
  .card,
  .card img {
    width: 190px;
    height: 271px;
  }
  .card .title {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1550px) {
  .card,
  .card img {
    width: 210px;
    height: 300px;
  }
  .card .title {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1700px) {
  .card,
  .card img {
    width: 235px;
    height: 336px;
  }
  .card .title {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1900px) {
  .card,
  .card img {
    width: 158px;
    height: 226px;
  }
  .card .title {
    font-size: 20px;
  }
}
